<template>
  <div id="order">
    <c-title :hide="false" text="确认订单"></c-title>
    <div class="contenbox">
      <swiperImg :info="infoData.images" v-if="infoData"></swiperImg>
      <div class="title">{{ infoData.title }}</div>
      <diyfrom
        v-if="dyFormPopup"
        v-on:submitsave="diyFormSave"
        style="height: 100%; overflow: auto;"
        :form_id="infoData.diy_form_id"
        :form_data_id="activeFormDataID"
        modeType="Single"
        :singleStatus="true"
        :desThumb="false"
        :showCtitle="false"
        :hideSubBtn="true"
        ref="diyfrom"
      ></diyfrom>
      <div class="title" v-if="supporter_comment">
        <div class="txt">挑战宣言</div>
        {{ supporter_comment }}
      </div>
    </div>
    <div class="btn set-pc-style">
      <div class="leftBtn">
        合计：{{ $i18n.t("money") }}<span>{{ infoData.amount }}</span>
      </div>
      <div class="rightBtn" @click="subMethod">{{infoData.order_diy_name}}</div>
    </div>
    <!-- <van-popup v-model="dyFormPopup" position="bottom" class="mint-popup-4" :style="{ width: '100%', height: '100%', overflow: 'auto', display: dyFormPopup ? 'flex' : 'none' }">
      <div class="boxF">
        <van-nav-bar :title="'填写表单'" left-arrow @click-left="dyFormPopup = false" />
        <diyfrom
          v-if="dyFormPopup"
          v-on:submitsave="diyFormSave"
          style="height: 100%; overflow: auto"
          :form_id="infoData.diy_form_id"
          :form_data_id="activeFormDataID"
          modeType="Single"
          :singleStatus="true"
          :desThumb="true"
          :showCtitle="false"
        ></diyfrom>
      </div>
    </van-popup> -->
  </div>
</template>
<script>
import { Toast } from "vant";
import diyfrom from "components/diyform";
import swiperImg from "./children/swipe.vue";
export default {
  data() {
    return {
      infoData: [],
      activeFormDataID: 0,
      dyFormPopup: false,
      selfPay: false,
      supporter_comment: ""
    };
  },
  activated() {
    this.activeFormDataID = 0;
    console.log(this.$route.query.self);
    if (this.$route.query.self) {
      // 自付
      this.selfPay = true;
    }
    this.getData();
  },
  methods: {
    subMethod(){
      this.$refs.diyfrom.submit();
      this.$refs.status = 0;
    },
    submitTap() {
      let url = "";
      if (!this.activeFormDataID) {
        Toast("请填写表单");
        return;
      }
      let json = {
        diy_form_data_id: this.activeFormDataID,
        activity_id: this.infoData.id
      };
      if (this.$route.params.uid) {
        json.uid = this.$route.params.uid;
      }
      if (this.selfPay) {
        // 自付接口
        json.diy_form_id = this.infoData.diy_form_id;
        url = "plugin.crowdfunding.frontend.pre-activity-order.joinSelfPaidActivity";
      } else {
        // 众筹接口
        url = "plugin.crowdfunding.frontend.activity-member.joinCrowdfundingActivity";
      }
      $http
        .get(url, json, "加载中")
        .then(response => {
          if (response.result === 1) {
            if (this.selfPay) {
              // 自付后去支付，路由crowd_activity_OrderPay
              this.$router.push(this.fun.getUrl("crowd_activity_OrderPay", { sn: response.data.order_sn }));
            } else {
              Toast(response.msg);
              // 众筹报名成功跳转个人众筹页面
              this.$router.replace(this.fun.getUrl("crowd_activity_funding", { id: response.data.activity_member_id }));
            }
          } else {
            Toast(response.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    diyFormSave(e) {
      this.activeFormDataID = e;
      this.submitTap();
      // this.dyFormPopup = false;
    },
    getData() {
      $http
        .get("plugin.crowdfunding.frontend.pre-activity-order.selfPaidPreOrder", { activity_id: this.$route.params.id }, "加载中")
        .then(response => {
          if (response.result === 1) {
            this.infoData = response.data;
            this.fun.setWXTitle(this.infoData.title);
            this.dyFormPopup = true;
          // 随机显示宣言
            let random;
            if (this.infoData.supporter_comment.length > 0) {
              if (this.infoData.supporter_comment.length <= 1) {
                random = 0;
              } else {
                random = Math.floor(Math.random() * this.infoData.supporter_comment.length);
              }
              this.supporter_comment = this.infoData.supporter_comment[random].comment;
            }
            console.log(random);
          } else {
            Toast(res.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  components: { diyfrom, swiperImg }
};
</script>
<style lang="scss" scoped>
#order {
  padding-bottom: 3rem;
}

.btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2.5rem;
  display: flex;
  background: #fff;

  .leftBtn {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 0.8125rem;
    color: #2f2f2f;
    padding-right: 1.2813rem;

    span {
      color: #f00;
    }
  }

  .rightBtn {
    width: 6.25rem;
    height: 2.5rem;
    background: #f00;
    text-align: center;
    line-height: 2.5rem;
    font-size: 0.8125rem;
    color: #fff;
  }
}

.contenbox {
  padding: 0.5938rem 0.625rem;

  .activityGood {
    width: 22.1875rem;
    height: 4.6875rem;
    background: #fff;
    border-radius: 0.3125rem;
    margin-top: 0.625rem;
    padding: 0.625rem;
    display: flex;
    align-items: center;

    .left {
      width: 3.4375rem;
      height: 3.4375rem;
      background: #a9a9a9;
      border-radius: 0.125rem;
      flex-shrink: 0;
      margin-right: 0.4063rem;

      img {
        width: 100%;
        height: 100%;
        border-radius: 0.125rem;
      }
    }

    .right {
      flex: 1;

      .price {
        font-size: 0.625rem;
        color: #f00;
        font-weight: 400;
        text-align: left;
        margin-top: 0.6875rem;
      }

      .title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 0.75rem;
        color: #2b2b2b;
        text-align: left;
      }
    }
  }
}

.leftCL {
  text-align: left;
}

.popHeader,
.DYFpopHeader {
  width: 100%;
  height: 2.5rem;
  background: white;
  display: flex;
  font-size: 16px;
  text-align: center;

  p {
    font-weight: bold;
    flex: 1;
    align-self: center;
  }

  i {
    padding: 0.5rem;
    align-self: center;
    flex: 0 0 1.5rem;
  }
}

.boxF {
  display: flex;
  flex-direction: column;
  width: 100%;
}
// .DYFpopHeader {
//   position: fixed;
//   top: 0;
//   z-index: 9;
// }
.title {
  padding: 0.625rem 0.625rem;
  box-sizing: border-box;
  background-color: #fff;
  margin-bottom: 0.625rem;
  text-align: left;
  margin-top: 0.625rem;

  .txt {
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: 0.3125rem;
  }
}
</style>
